<template>
	<div class="zh-tree">
		<div class="tree-table-all">
			<template v-for="(node, index) in treeData">
				<div class="tree-table-list clear" :key="index">
					<div v-for="(column,ikey) in myconfig.showTitleColumn"
						:key="ikey"
						:style="column.style"
						class="td"
					>
						<span 
							v-if="column.column === 'name'"
							class="column-name-left" :style="'margin-left:'+(node.level*9)+'px'"
						></span>
						<span 
						    v-if="column.column === 'name' && node.children && node.children.length > 0" @click.stop="node.toggle = !node.toggle"
						    style="cursor: pointer;" 
						    :class="node.toggle ? 'el-icon-caret-bottom' : 'el-icon-caret-right'">
						</span>
						<span class="toggles" v-if="column.column === 'name' && node.children && node.children.length <= 0"></span>
						<span>{{node[column.column]}}</span>
					</div>
					<div style="width:20%;" class="td">
						<el-button
					        type="text"
					        size="mini"
					        @click="edit(node)"
					    >
					        编辑
					    </el-button>
					    <el-button
					        type="text"
					        size="mini"
					        @click="addChildren(node)"
					    >
					        添加子级
					    </el-button>
					    <el-button
					        type="text"
					        size="mini"
					        class="delete-button"
					        @click="remover(node)"
					    >
					        删除
					    </el-button>
					</div>
					<div class="tree-table-children clear" v-show="node.children && node.children.length > 0 && node.toggle">
						<zh-tree 
							:treeConfig="treeConfig"
							:trees.sync="node.children"
							:_isRoot="false"
	                        :parentNode="node"
	                        :_level="level"/>
					</div>
				</div>
			</template>
		</div>
	</div>
</template>
<script>
	export default {
		props : {
			trees : Array,
			treeConfig: Object, 
			_isRoot : Boolean,
            _level : Number,
            parentNode : Object
		},
		data(){
			return {
				myconfig: {
					showTitleColumn: [
						{column:'name',text:'名称', style:{width:'40%'}},
						{column:'type',text:'是否教室', style:{width:'20%'}},
						{column:'status',text:'状态', style:{width:'20%'}},
					]
				},
				new_treeData: [],
				treeData: [],
				isRoot : this._isRoot !== undefined ? this._isRoot : true,
                level : Number.isInteger(this._level) ? this._level + 1 : 1,
			}
		},
		created(){
			this.setNodes()
			this.myconfig = Object.assign(this.myconfig, this.treeConfig ? this.treeConfig : {})
		},
		watch:{
			trees(){
                this.setNodes()
            },
		},
		methods: {
			edit(node){
				//可根据判断路由来调用不同父组件的事件，当前写的是校园分区，组件架构的未写，参考校园分区的写法
				$global.$emit('edit',node) //node传当前点击的参数
			},
			addChildren(node){
				$global.$emit('add',node) //node传当前点击的参数
			},
			remover(node){
				$global.$emit('delete',node) //node传当前点击的参数
			},
			setNodes(){
                if (Array.isArray(this.trees)) {
                    this.trees.forEach(node => {
                        node = this.mergeInfo(node)
                        this.treeData.push(Object.assign({}, node))
                    })
                }
            },
			mergeInfo(node){
                node.toggle = true
                node.children = Array.isArray(node.children) ? node.children : []
                return node
            },
		}
	}
</script>
<style lang="scss">
	.zh-tree {
		.tree-table-list {
			>div:first-child {
				text-align: left;
				border-left: none;
			}
			.td {
				float: left;
				height: 40px;
				line-height: 40px;
				border-bottom: 1px solid #e6e6e6;
				border-left: 1px solid #e6e6e6;
				box-sizing: border-box;
				.toggles {
					display: inline-block;
					width: 16px;
					height: 16px;
					font-size: 16px;
				}
			}
			.tree-table-children {
				.tree-table-list {
					border-bottom: none;
				}
			}
		}
	}
</style>